<template>
  <div class="editTask" id="editTask">
    <div class="task-paper">
      <el-form class="task-form" ref="form" :model="FormData" label-width="80px">
      <!-- 试卷名 -->
        <h1 class="task-title">
          {{FormData.title}}
          {{!getSingleScoreADD?'':'（'+FormData.totalScore+'分满）'}}</h1>
        <el-input
          type="textarea"
          :autosize="{minRows:1}"
          style="width: 50%;"
          class="task-el-edit-title task-el-input"
          v-model="FormData.title"
          placeholder="请输入内容"/>
        <div class="task-h2" v-if="FormData.singleData.length">
              <!-- '每题'+FormData.singleData[0].score+'分，'+ -->
          <h2>{{capitalFigures[
              FormData.singleData.length?0:-1
            ]}}. 单项选择{{
            '('+
            '共'+FormData.singleData.length+'题，共'+getSingleScoreADD+
            '分)'
            }}
            <!-- +'共'+FormData.singleData[0].score*FormData.singleData.length+'分'+ -->
          </h2>
        </div>
        <div id="single-choice" class="task-single-choice2" >
          <singelChoice :FormData="FormData" @getSingleAnswer="getSingleAnswer"/>
        </div>
        <div class="task-h2" v-if="FormData.multipleData.length">
          <h2>{{capitalFigures[
              FormData.singleData.length?1:0
            ]}}. 多项选择
            <span v-if="FormData.multipleData.length">
            {{'(每题'+FormData.multipleData[0].score+
            '分，'+'共'+FormData.multipleData.length+'题，' +
            '共'+FormData.multipleData[0].score*FormData.multipleData.length+'分)'}}
            </span>
          </h2>
        </div>
        <div id="multiple-choice" class="task-multiple-choice" >
          <multipleChoice :FormData="FormData" @getMultipleAnswer="getMultipleAnswer"/>
        </div>
        <div class="task-h2" v-if="FormData.judgeData.length">
          <h2>{{capitalFigures[
              (FormData.singleData.length?1:0) + (FormData.multipleData.length?1:0)
            ]}}. 判断题
            <span v-if="FormData.judgeData.length">
            {{'(每题'+FormData.judgeData[0].score+
            '分，'+'共'+FormData.judgeData.length+'题，' +
            '共'+FormData.judgeData[0].score*FormData.judgeData.length+'分)'}}
            </span>
          </h2>
        </div>
        <div id="judge" class="task-judge">
          <judge :FormData="FormData" @getJudgeAnswer="getJudgeAnswer"/>
        </div>
        <div>
          <el-form-item>
            <el-button
              icon="el-icon-success" 
              type="primary" 
              style="width:120px"
              title="完事！，提交试卷!" 
              size="medium"
              @click="sunmitPaper()">提交</el-button>
          </el-form-item>
        </div>
        <!-- <div class="task-h2"><h2>四. 主观题</h2></div> -->
        <!-- <div id="subjective-questions" class="task-subjective-questions"></div> -->
      </el-form>
    </div>
  <!-- 工具箱 -->
    <toolBox :FormData="FormData"/>
  <!-- 工具箱 -->
    <div>
      <!-- 分数设置 -->
      <el-dialog :title="'设置'+scoreModel.typeZH+'分数'" 
        :visible.sync="scoreModel.setScoreDialog" 
        class="modal" 
        :modal-append-to-body="false"
        style="z-index:9999;">
        <el-form>
          <el-form-item :label="scoreModel.typeZH">
            <el-input v-model="scoreModel.score" class="el-score" autofocus="true" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="scoreModel.setScoreDialog = false">取 消</el-button>
          <el-button type="primary" @click="setScore">设 置</el-button>
        </div>
      </el-dialog>
      <dialogScore :open="dialogScore_open" :formData="FormData" :key="time"/>
    </div>
  </div>
</template>

<script>
import {BUS} from '../javascript/functions.js'
import {Paper} from '../javascript/paper.js'
import {singleData, multipleData, judgeData, programmingData} from '../javascript/formatData'
import singelChoice from './questionBank/singleChoice.vue'
import multipleChoice from './questionBank/multipleChoice.vue'
import judge from './questionBank/judge.vue'
import toolBox from './toolBox.vue'
import dialogScore from '../components/dialog/dialog-score.vue'
export default {
  name: 'task-edit',
  components: {singelChoice, toolBox, multipleChoice, judge, dialogScore},
  data () {
    return {
      time: new Date().getTime(),
      dialogScore_open: false,
      scoreModel: {
        setScoreDialog: false,
        type: '',
        typeZH: '',
        score: null
      },
      paper: '',
      getSingleAnswer: {},
      getMultipleAnswer: {},
      getJudgeAnswer: {},
      // 选择题选项
      choiceList: ['A', 'B', 'C', 'D'],
      capitalFigures: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三'],
      // 试卷题型
      FormData: {},
      // 试卷答案
      FormDataAnswer: {
        sigleData: []
      },
      h_index: 0
    }
  },
  created () {
    // this.FormData = FormData
    this.paper = new Paper()
    this.FormData = this.paper.FormData
    // this.FormData = FormData
    // console.log(this.FormData.singleData)
    // 在此处引入代码
  },
  mounted () {
    // // this.FormData = FormData
    // this.paper = new Paper()
    // this.FormData = this.paper.FormData
    // console.log(this.FormData.singleData)
    // // 在此处引入代码
    BUS.$on('openScoreModel', (e) => {
      this.scoreModel.setScoreDialog = e.e
      this.scoreModel.type = e.type
      this.scoreModel.typeZH = e.typeZH
      setTimeout(() => {
        document.querySelector('.el-score').click()
        document.querySelector('.el-score').focus()
      }, 100)
    })
    BUS.$on('openScoreConfigModel', (e) => {
      this.dialogScore_open = e.e
      this.time = new Date().getTime()
    })
    // 接受 试卷题目分数配置器的 submit
    BUS.$on('scoreConfigFormData', (e) => {
      console.log(e)
      // 生成题目，生成数据
      // 单选
      for (let i = 0; i < e.num_single; i++) {
        this.FormData.singleData.push(JSON.parse(JSON.stringify(singleData)))
      }
      // 多选
      for (let i = 0; i < e.num_multiple; i++) {
        this.FormData.multipleData.push(JSON.parse(JSON.stringify(multipleData)))
      }
      // 判断
      for (let i = 0; i < e.num_judge; i++) {
        this.FormData.judgeData.push(JSON.parse(JSON.stringify(judgeData)))
      }
      // 编程题
      // for (let i = 0; i < e.num_single; i++) {
      //   this.FormData.singleData.push(JSON.parse(JSON.stringify(singleData)))
      // }
      // 完成之后 发送事件车回调
      BUS.$emit('scoreConfigFormDataCallBack', 'ok')
    })
  },
  methods: {
    // 提交试卷
    sunmitPaper () {
      console.log(this.FormData)
    },
    // 设置分数
    setScore () {
      if (!this.FormData[this.scoreModel.type].length) {
        return this.$message({
          message: '请先添加题型再设置分数',
          type: 'warning'
        })
      }
      this.FormData[this.scoreModel.type].forEach((item, index) => {
        console.log(item, index)
        item.score = this.scoreModel.score
      })
      this.scoreModel.setScoreDialog = false
      this.$message({
        message: '成功设置分数',
        type: 'success'
      })
    }
  },
  computed: {
    getSingleScoreADD: function () {
      let add = 0
      this.FormData.singleData.forEach(item => {
        add += Number(item.score)
      })
      return add
    },
    getMultipleScoreADD: function () {
      let add = 0
      this.FormData.multipleData.forEach(item => {
        add += Number(item.score)
      })
      return add
    },
    getJudgeScoreADD: function () {
      let add = 0
      this.FormData.judgeData.forEach(item => {
        add += Number(item.score)
      })
      return add
    },
    getProgrammingScoreADD: function () {
      let add = 0
      this.FormData.programmingData.forEach(item => {
        add += Number(item.score)
      })
      return add
    }
  }
}
</script>

<style lang="less">
.task-h2{
  width: 95%;
  height: 50px;
  text-align: left;
  margin:0 30px;
}
// .task-el-input{
// }
// .task-el-radio{

// }
// .p{

// }
// .option{

// }
// .design{

// }
// div{
//   // margin-top: 20px;
// }
@import url('./task-edit.less');
</style>